<template>
  <view class="qrcodeBillXgl">
    <u-overlay :show="changeUserModalShow">
      <view :animation="animationData" class="drawer_box" @tap.stop>
        <view class="drawer_content">
          <input class="btn" type="tel" placeholder="请输入手机号" maxlength="11" @input="phoneInput">
          <input class="btn" type="password" placeholder="请输入密码" @input="pwdInput">
        </view>
        <view class="btn_ok" @tap="loginUser">切换</view>
        <view class="btn_ok" @tap="changeUserModalShow=false">取消</view>
      </view>
    </u-overlay>

    <u-tabs :list="tabList" line-width="0" item-style="height: 44px;width: 44%;" scrollable="false" :active-style="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}" :inactive-style="{color: '#606266',transform: 'scale(1)'}" @click="switchTab" />

    <u-calendar :show="showDate" mode="range" :default-date="defaultDate" min-date="2023-01-01" month-num="12" close-on-click-overlay allow-same-day @confirm="onDateChange" @close="onDateClose" />
    <view v-show="currentTab==1" class="swichDate" @click="showDate = true">
      <text class="iconfont icon-riqi" />切换日期
    </view>
    <view class="swichUser" @tap="changeUserModalShow=true">
      <text class="iconfont icon-geren_qiehuan" />切换用户
    </view>

    <u-loading-icon :show="loading" />

    <view v-if="currentTab===1" class="top-part">
      <view v-for="(item, index) in tableData" :key="index" class="bill_box">
        <view>
          <view class="money-else">￥{{ item.payMoney }}</view>
        </view>

        <view class="order-no">
          <text space="nbsp">柜组名称 {{ item.cabinetName }}</text>
        </view>
        <view class="table">
          <view class="tr">
            <view class="td1">付款方式</view>
            <view class="td2">{{ item.payMethodName }}</view>
          </view>
          <view class="tr">
            <view class="td1">日期</view>
            <view class="td2">{{ item.payDate }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 立牌账单 -->
    <view v-if="currentTab===2" class="top-part">
      <view v-for="(item, index) in tableData" :key="index" class="bill_box">
        <view v-if="item.discountAmount==0">
          <view class="money">￥{{ item.finalMoney }}</view>
          <view class="paymethod" :class="item.hasPayed?'':'grey'">{{ item.hasPayed?'已支付':'未支付' }}</view>
        </view>
        <view v-else>
          <view class="money-fee">￥{{ item.discountAmount }}</view>
          <view class="money-else">￥{{ item.finalMoney }}</view>
          <view class="paymethod-else" :class="item.hasPayed?'':'grey'">{{ item.hasPayed?'已支付':'未支付' }}</view>
        </view>

        <view class="order-no">
          <text space="nbsp">订单号 {{ item.orderNo }}</text>
        </view>
        <view class="table">
          <view class="tr">
            <view class="td1">手机号</view>
            <view class="td2">{{ !item.phone? '':item.phone }}</view>
          </view>
          <view class="tr">
            <view class="td1">下单时间</view>
            <view class="td2">{{ item.createTime }}</view>
          </view>
          <view class="tr">
            <view class="td1">支付时间</view>
            <view class="td2">{{ !item.payTime? '':item.payTime }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 没有更多 -->
    <u-loadmore :status="loadMoreStatus" color="#999" margin-top="40" height="20" line-color="#999" dashed @loadmore="loadMore" />

  </view>
</template>

<script>
const util = require('@/utils/util.js')
import { xglQRCodePaymentMerchantLogin, orderXglPage, xglSaleBillPage } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      tabList: [], // tab分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      totalPage: 0, // 总页数
      tableData: [], // 表单数据
      loadMoreStatus: 'loadmore',
      loading: false,

      showDate: false, // 时间范围筛选
      searchDateStart: util.formatDate(new Date()), // 开始时间
      searchDateEnd: util.formatDate(new Date()), // 结束时间
      changeUserModalShow: false, // 切换用户
      merchantLoginQuery: { // 用户登陆信息
        phone: '',
        password: ''
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    defaultDate() {
      return [this.searchDateStart, this.searchDateEnd]
    },
    searchTableQuery() {
      if (this.merchantLoginQuery.phone) {
        return {
          phone: this.merchantLoginQuery.phone,
          size: 10,
          current: 1,
          queryDate: [this.searchDateStart, this.searchDateEnd]
        }
      } else {
        return {
          phone: this.$store.getters.userInfo.phone,
          size: 10,
          current: 1,
          queryDate: [this.searchDateStart, this.searchDateEnd]
        }
      }
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '商户中心' + '[' + this.userInfo.phone + ']'
    })
    this.searchTableQuery.phone = this.userInfo.phone
    this.getSection()
  },

  onReachBottom() {
    this.loadMore()
  },

  methods: {
    /**
     * 获取平台分类
     */
    getSection() {
      this.tabList = [{
        name: '收银汇总'
      }, {
        name: '立牌账单'
      }]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
      this.getSearchList()
    },
    onDateChange(e) {
      this.showDate = false
      const len = e.length
      this.searchDateStart = e[0]
      this.searchDateEnd = e[len - 1]
      this.init()
      this.getSearchList()
    },
    onDateClose() {
      this.showDate = false
    },
    phoneInput(e) {
      this.merchantLoginQuery.phone = e.detail.value
    },
    pwdInput(e) {
      this.merchantLoginQuery.password = e.detail.value
    },
    loginUser() {
      const that = this
      xglQRCodePaymentMerchantLogin(that.merchantLoginQuery).then(res => {
        if (res.code === 0) {
          that.changeUserModalShow = false
          uni.setNavigationBarTitle({
            title: '商户中心' + '[' + that.merchantLoginQuery.phone + ']'
          })
          that.searchTableQuery.phone = that.merchantLoginQuery.phone
          that.init()
          that.getSearchList()
        }
      })
    },
    switchTab(e) {
      if (this.currentTab === e.id) {
        return
      }
      this.currentTab = e.id
      this.init()
      this.getSearchList()
    },
    // 切换时重置数据
    init() {
      this.searchTableQuery.current = 1
      this.totalPage = 0
      this.tableData = []
      this.loadMoreStatus = 'loadmore'
    },
    loadMore() {
      if (this.searchTableQuery.current < this.totalPage) {
        this.searchTableQuery.current = this.searchTableQuery.current + 1
        this.getSearchList()
      } else {
        this.loadMoreStatus = 'nomore'
      }
    },
    /**
    * 获取卡券列表
    */
    getSearchList() {
      const that = this
      that.loadMoreStatus = 'loading'
      that.loading = true
      if (that.currentTab === 1) {
        xglSaleBillPage(that.searchTableQuery).then(res => {
          that.loading = false
          that.loadMoreStatus = 'loadmore'
          if (res.code === 0) {
            that.handle('收银汇总', res)
          }
        })
      } else if (that.currentTab === 2) {
        orderXglPage(that.searchTableQuery).then(res => {
          that.loading = false
          that.loadMoreStatus = 'loadmore'
          if (res.code === 0) {
            that.handle('立牌账单', res)
          }
        })
      }
    },

    handle(desc, res) {
      this.totalPage = res.data.pages
      console.info(desc + '列表数据：', res.data.records)
      this.tableData = this.tableData.concat(res.data.records)
      if (res.data.current === res.data.pages) {
        this.loadMoreStatus = 'nomore'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcodeBillXgl {
  background: #f2f3f7;
  height: calc(100vh);
  .drawer_box {
    width: 550rpx;
    overflow: hidden;
    position: fixed;
    top: 36%;
    left: 14%;
    z-index: 1001;
    background: #fafafa;
    border-radius: 15px;
    .drawer_content {
      height: 84px;
      overflow-y: scroll;
      /*超出父盒子高度可滚动*/
      .btn {
        text-align: center;
        font-size: 30rpx;
        height: 60rpx;
        width: 90%;
        margin: auto;
        margin-top: 20rpx;
        background-color: #fafafa;
        border-bottom: 1rpx solid #999999;
      }
    }
    .btn_ok {
      padding: 10px;
      font: 30rpx 'microsoft yahei';
      text-align: center;
      border-top: 1px solid #e8e8ea;
      color: #3cc51f;
    }
  }
  .swichDate {
    position: fixed;
    top: 90rpx;
    right: 200rpx;
    height: 40rpx;
    width: 150rpx;
    z-index: 1;
  }
  .swichUser {
    position: fixed;
    top: 90rpx;
    right: 28rpx;
    height: 40rpx;
    width: 150rpx;
    z-index: 1;
  }
  .top-part {
    border-radius: 12rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 45rpx;
    .bill_box {
      background: #fff;
      box-shadow: 2px 2px 4px #e0e0e0;
      border-radius: 13rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 16rpx;
      margin-bottom: 20rpx;
      position: relative;
      .money {
        position: absolute;
        font-size: 32rpx;
        top: 20rpx;
        right: 20rpx;
        color: red;
      }
      .paymethod {
        position: absolute;
        font-size: 28rpx;
        top: 70rpx;
        right: 20rpx;
        color: #f0c433;
      }
      .paymethod.grey {
        color: rgb(187, 187, 187);
      }
      .money-fee {
        position: absolute;
        font-size: 32rpx;
        top: 20rpx;
        right: 20rpx;
        color: rgb(167, 167, 167);
        background: rgb(255, 255, 255);
        text-decoration: line-through;
      }
      .money-else {
        position: absolute;
        font-size: 34rpx;
        top: 60rpx;
        right: 20rpx;
        color: red;
      }
      .paymethod-else {
        position: absolute;
        font-size: 28rpx;
        top: 110rpx;
        right: 20rpx;
        color: #f0c433;
      }
      .paymethod-else.grey {
        color: rgb(187, 187, 187);
      }
      .order-no {
        margin: 20rpx 20rpx 10rpx 10rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 80%;
        font-size: 40;
        font-weight: bolder;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
      }
      .table {
        margin: 10rpx 20rpx 20rpx 10rpx;
        justify-content: flex-start;
        letter-spacing: 2rpx;
        font-size: 26rpx;
        line-height: 38rpx;
        .tr {
          display: flex;
          width: 80%;
          justify-content: flex-start;
          align-items: center;
          .td1 {
            display: flex;
            width: 30%;
          }

          .td2 {
            display: flex;
            width: 70%;
            color: rgb(167, 167, 167);
            white-space: nowrap;
            overflow: hidden;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
  }
}
</style>
